<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        .fa {
            width: 500px;
            height: 400px;
            margin: 20px auto;

        }

        .wrap {
            width: 500px;
            height: 300px;
            border: 1px solid #333;
            position: relative;
        }
        .wrap img {
            width: 100%;
            height: 100%;
        }

        .box1 {
            width: 50px;
            height: 50px;
            background-color: #f66;
            position: absolute;
            z-index: 2;
            background: url(../images/5.jpg) no-repeat;
            /* background-position-x: -355px;
            background-position-y: -50px; */
            /* background-position: left right; */
            background-size: 500px 300px;
            left: 0;
            top: 50px;
        }

        .box2 {
            width: 50px;
            height: 50px;
            background-color: #fff;
            position: absolute;
            left: 355px;
            top: 50px;
        }

        .sub {
            width: 500px;
            height: 50px;
            background-color: grey;
            border-radius: 50px;
            margin-top: 20px;
            position: relative;
        }

        .sub .box {
            width: 50px;
            height: 50px;
            background-color: pink;
            border-radius: 50%;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="wrap">
            <img src="../images/5.jpg" alt="">
            <div class="box1"></div>
            <div class="box2"></div>
        </div>
        <div class="sub">
            <div class="box"></div>
        </div>
    </div>

</body>
<script>
    var box1 = document.getElementsByClassName("box1")[0];
    var box2 = document.getElementsByClassName("box2")[0];
    var box = document.getElementsByClassName("box")[0];
    var wrap = document.getElementsByClassName("wrap")[0];
    var sub = document.getElementsByClassName("sub")[0];

    randopos();
    function randopos() {
        randomX = Math.round(60 + Math.random() * 400);
        randomY = Math.round(Math.random() * 200);
        box2.style.left = randomX + "px";
        box2.style.top = randomY + "px";

        var a = -randomX + "px";
        var b = -randomY + "px";
        // box1.style.cssText = ` background-position-x: ${a};background-position-y: ${b};`;
        box1.style.backgroundPosition = `left ${a} top ${b}`  ;
        box1.style.top = randomY + "px";
    }

    var maxLeft = sub.clientWidth - box.clientWidth;
    var maxTop = sub.clientHeight - box.clientHeight;
    box.onmousedown = function (e) {
        var e = e || window.event;
        var posX = e.offsetX;
        var posY = e.offsetY;
        document.onmousemove = function (e) {
            var e = e || window.event;
            x = e.pageX - sub.offsetLeft - posX;
            y = e.pageY - sub.offsetTop - posY;
            console.log(e.pageX, e.pageY);
            console.log(x, y);

            if (x < 0) x = 0;
            if (y < 0) y = 0;
            if (x > maxLeft) x = maxLeft;
            if (y > maxTop) y = maxTop;

            box.style.left = x + "px";
            box.style.top = y + "px";

            box1.style.left = x + "px";
        }

        document.onmouseup = function () {
            if (box.offsetLeft) {
                if (x >= randomX - 2 && x <= randomX + 2) {
                    // location = "./index.htm";
                    alert("验证成功");
                } else {
                    box.style.left = "0";
                    box1.style.left = "0";
                    randopos();
                }
            }
            document.onmousemove = null;
        }
    }


</script>

</html>